<template>
<div>

	<flexbox orient="vertical">
		<flexbox-item >
			<group gutter="0">
		      <cell is-link v-for="item in mailList" @click.native="addressDetail(item)">
		      	<span class="h3" slot="title">
		      		{{item.lxr_name}} <span class="hui h5">{{item.lxr_mobile}}</span>
		      	</span>
		      	<span class="h4" slot="inline-desc">
		      		<span v-if="item.state == 1" class="red">[默认]</span>
		      		{{getAddress(item)}}
		      	</span>
		      </cell>
		    </group>
		</flexbox-item>

		<flexbox-item>
			<yd-button size="large" type="primary" @click.native="edit">
				添加新地址
			</yd-button>
		</flexbox-item>
	</flexbox>
  		
</div>
</template>

<script>

import { mapGetters } from 'vuex';
import { Group, Cell } from 'vux'

export default {
	name: 'test',
		data () {
		return {
		  	
		}
	},

	components: {
	    Group,
	    Cell,
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
			'mailList',
		]),

		
	},

	methods : {
		
		edit (item) {
			this.$router.push({ 
				'name': 'address', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		getAddress (item) {
			var a = item.lxr_address.split('@dlq@');
			return a[0] + ',' + a[1];
		},

		addressDetail (item) {
			console.log(item);
			this.$router.push({ 
				'name': 'address', 
				'query' : { 
					'company_code' : this.company_code,
					...item,
				}
			});
		},

	},

	mounted () {
		
		this.$store.dispatch('getMailList', {});
		
	}
}
</script>

<style scoped>


</style>
